import 'package:flutter/material.dart';

class ScrollAnimationPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ScrollableHeader(),
      ),
    );
  }
}

class ScrollableHeader extends StatefulWidget {
  @override
  _ScrollableHeaderState createState() => _ScrollableHeaderState();
}

class _ScrollableHeaderState extends State<ScrollableHeader> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _heightAnimation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );

    _heightAnimation = Tween<double>(begin: 120.0, end: 50.0).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  void _onScroll(double offset) {
    if (offset <= 100) {
      _controller.value = offset / 100;
    } else {
      _controller.value = 1.0;
    }
  }

  @override
  Widget build(BuildContext context) {
    return NotificationListener<ScrollNotification>(
      onNotification: (ScrollNotification notification) {
        if (notification is ScrollUpdateNotification) {
          _onScroll(notification.metrics.pixels);
        }
        return true;
      },
      child: Stack(
        children: [
          ListView.builder(
            itemCount: 50,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text('Item $index'),
              );
            },
          ),
          AnimatedBuilder(
            animation: _heightAnimation,
            builder: (context, child) {
              return Container(
                height: _heightAnimation.value,
                color: Colors.blue,
                alignment: Alignment.center,
                child: Text(
                  'Header',
                  style: TextStyle(color: Colors.white, fontSize: 24),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}